<template>
	<view class="oa-content">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">添加跟进记录</text>
			</view>
		</tn-nav-bar>

		<view class="" :style="{paddingTop: vuex_custom_bar_height + 30 + 'px'}" style="padding-bottom: 240rpx;">

			<!-- 跟进类型 -->
			<picker @change="bindTypeChange" :value="typeIndex" :range="DICT.crm_follow_up_type" range-key="label">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item tn-flex-1">
						<view class="tn-text-bold tn-text-lg">
							跟进类型 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
						<view class="tn-color-gray tn-padding-top-xs" v-if="typeIndex===99">
							请选择
						</view>
						<view class="tn-color-black tn-padding-top-xs" v-else>
							{{DICT.crm_follow_up_type[typeIndex].label}}
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
						<view class="tn-icon-right tn-padding-top"></view>
					</view>
				</view>
			</picker>

			<!-- 下次联系时间 -->
			<picker mode="date" :value="formData.nextTime" :start="startDate" :end="endDate" @change="setNextTime">
				<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
					<view class="justify-content-item tn-flex-1">
						<view class="tn-text-bold tn-text-lg">
							下次联系时间 <text class="tn-color-red tn-padding-left-xs">*</text>
						</view>
						<view class="tn-color-gray tn-padding-top-xs" v-if="formData.nextTime===''">
							请选择
						</view>
						<view class="tn-padding-top-xs" v-else>
							{{ formData.nextTime }}
						</view>
					</view>
					<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
						<view class="tn-icon-time tn-padding-top"></view>
					</view>
				</view>
			</picker>
			<!-- 跟进内容 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">
				<view class="tn-flex justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						跟进内容 <text class="tn-color-red tn-padding-left-xs">*</text>
					</view>
				</view>
				<view class="tn-flex justify-content-item tn-color-gray">
					500字内
				</view>
			</view>
			<view class="tn-bg-gray--light tn-padding tn-text-justify"
				style="border-radius: 10rpx;margin: 0 30rpx 30rpx 30rpx;">
				<textarea v-model="formData.content" maxlength="500" placeholder="请输入跟进内容"
					placeholder-style="color:#AAAAAA" style="height: 200rpx;width: 100%;"></textarea>
			</view>

			<!-- 图片上传 -->
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						图片
					</view>
					<view class="tn-color-gray tn-padding-top-xs">
						<tn-image-upload v-model="formData.picUrls" :max="9" :multiple="true"></tn-image-upload>
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey tn-margin-left">
					<view class="tn-icon-image tn-padding-top"></view>
				</view>
			</view>

			<!-- 附件上传
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						附件
					</view>
					<view class="tn-color-gray tn-padding-top-xs">
						<tn-image-upload v-model="formData.fileUrls" :max="5" :multiple="true" type="file"></tn-image-upload>
					</view>
				</view>
				<view class="justify-content-item tn-text-xl tn-color-grey tn-margin-left">
					<view class="tn-icon-file tn-padding-top"></view>
				</view>
			</view> -->

			<!-- 关联联系人
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @tap="handleOpenContact">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						关联联系人
					</view>
					<view class="tn-color-gray tn-padding-top-xs" v-if="formData.contacts.length === 0">
						点击添加联系人
					</view>
					<view class="tn-color-black tn-padding-top-xs" v-else>
						已选择 {{ formData.contacts.length }} 个联系人
					</view>
				</view>
				<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
					<view class="tn-icon-right tn-padding-top"></view>
				</view>
			</view>
 -->
			<!-- 关联商机
			<view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" @tap="handleOpenBusiness">
				<view class="justify-content-item tn-flex-1">
					<view class="tn-text-bold tn-text-lg">
						关联商机
					</view>
					<view class="tn-color-gray tn-padding-top-xs" v-if="formData.businesses.length === 0">
						点击添加商机
					</view>
					<view class="tn-color-black tn-padding-top-xs" v-else>
						已选择 {{ formData.businesses.length }} 个商机
					</view>
				</view>
				<view class="justify-content-item tn-text-lg tn-color-grey tn-margin-left">
					<view class="tn-icon-right tn-padding-top"></view>
				</view>
			</view>
 -->
			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed tn-padding">
				<view class="tn-flex-1 justify-content-item tn-text-center">
					<tn-button backgroundColor="#00C8B0 " padding="40rpx 0" width="60%" :fontSize="28"
						fontColor="#FFFFFF" shape="round" @click="submitForm">
						<text class="">提交保存</text>
					</tn-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'FollowUpRecordAdd',
		mixins: [template_page_mixin],

		data() {
			return {
				// 时间选择器配置
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showTimePicker: false,
				startYear: 2023,
				endYear: 2100,

				// 跟进类型选择
				typeIndex: 99,

				// 表单数据
				formData: {
					type: '', // 跟进类型
					nextTime: '', // 下次联系时间
					content: '', // 跟进内容
					picUrls: [], // 图片
					fileUrls: [], // 附件
					contacts: [], // 关联联系人
					businesses: [], // 关联商机
					bizType: 'crm_customer', // 业务类型
					bizId: '' // 业务ID
				}
			}
		},
		onLoad(options) {
			console.log('USER_ID', this.USER_ID)
			// 如果有传入客户ID，则设置业务ID
			if (options.customerId) {
				this.formData.bizId = options.customerId
			}
		},
		methods: {
			setNextTime(e){
				this.formData.nextTime = e.detail.value
			},
			// 跟进类型选择
			bindTypeChange(e) {
				this.typeIndex = e.detail.value
				this.formData.type = this.DICT.crm_follow_up_type[e.detail.value].value
			},

			// 显示时间选择器
			showTimePicker() {
				this.showTimePicker = true
			},

			// 确认时间选择
			confirmTimePicker(event) {
				this.formData.nextTime = `${event.year}-${event.month}-${event.day}`
			},

			// 打开联系人选择
			handleOpenContact() {
				// 这里可以跳转到联系人选择页面或打开弹窗
				uni.showToast({
					title: '联系人功能开发中',
					icon: 'none'
				})
			},

			// 打开商机选择
			handleOpenBusiness() {
				// 这里可以跳转到商机选择页面或打开弹窗
				uni.showToast({
					title: '商机功能开发中',
					icon: 'none'
				})
			},

			// 提交表单
			submitForm() {
				// 验证必填字段
				if (!this.formData.type) {
					uni.showToast({
						title: '请选择跟进类型',
						icon: 'none'
					})
					return
				}

				if (!this.formData.nextTime) {
					uni.showToast({
						title: '请选择下次联系时间',
						icon: 'none'
					})
					return
				}

				if (!this.formData.content.trim()) {
					uni.showToast({
						title: '请输入跟进内容',
						icon: 'none'
					})
					return
				}

				// 显示加载提示
				uni.showLoading({
					title: '提交中...'
				})

				// 准备提交数据
				const submitData = {
					type: this.formData.type,
					nextTime: this.formData.nextTime ? new Date(this.formData.nextTime).getTime() : null,
					content: this.formData.content.trim(),
					picUrls: this.formData.picUrls,
					fileUrls: this.formData.fileUrls,
					contactIds: this.formData.contacts.map(item => item.id),
					businessIds: this.formData.businesses.map(item => item.id),
					bizType: this.BizTypeEnum.CRM_CUSTOMER,
					bizId: this.formData.bizId
				}

				// 调用API接口
				console.log('提交数据:', submitData)
				this.api.post('/crm/follow-up-record/create', submitData).then(response => {
					uni.showToast({
						title: '跟进记录添加成功',
						icon: 'success'
					})
					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(error => {
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

// ... existing code ...